<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3>采购列表</h3>
      <el-form :inline="true" class="demo-form-inline" :label-width="Mobile == 'phone' ? '80px' : ''">
        <el-form-item label="sku">
          <el-input size="small" v-model="SearchForm.Sku" placeholder="请输入您要搜索的sku"
                    :style="{width:Mobile == 'phone' ? '108%' : ''}" clearable @clear="OnSeacrh"></el-input>
        </el-form-item>
        <el-form-item :style="{marginLeft:Mobile == 'phone' ? '10px' : ''}">
          <el-button size="mini" type="primary" @click="OnSeacrh">查询</el-button>
          <el-button size="mini" type="success" @click="detailDialog">采购列表明细</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间表格部分 -->
    <el-table v-if="tabaleHeight.length" ref="table" :data="tableData" border style="width: 100%" :height="tabaleHeight" size="mini" v-loading="loading">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column :label="item.title" :width="item.width" show-overflow-tooltip v-for="item in Page.tableHeader" :key="item.title">
        <template v-slot="scope">
          <ColumnTable :CurretItem="scope.row" :ItemValue="item.value"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="detailDialog(scope.row, 'DetailDialog')">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="paramsquery.pageIndex" :page-size="paramsquery.pageSize" layout="total, prev, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 全局表单弹窗 -->
    <dialogDetail ref="dialog" :Mobile="Mobile" title="采购列表明细"></dialogDetail>
  </div>
</template>

<script>
import { mapState} from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
import { getProcureList} from "@/api";
import {Page} from "./index"; // 引入页面信息
import dialogDetail from "./dialog"
export default {
  mixins: [mixin],
  data() {
    return {
      /* 页面信息 */
      Page,
      /* 搜索部分 */
      SearchForm: {
        Sku: "",
      },
      /* 表格部分 */
      loading: true,
      tableData: [],
      paramsquery: {
        pageIndex: 1,
        pageSize: 20,
      },
      total: 0,
    };
  },
  components:{
    dialogDetail
  },
  computed: {
    ...mapState(["isMobile"]),
  },
  mounted() {
    this.GetDataList();
    this.tabaleHeight = `calc(${this.tabaleHeight} - 54px)`
  },
  methods: {
    OnSeacrh() {
      this.paramsquery.pageIndex = 1;
      this.GetDataList();
    },
    // 请求列表数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        pageSize: this.paramsquery.pageSize,
        sku: this.SearchForm.Sku
      };
      getProcureList(data).then((res) => {
        this.loading = false;
        let response = res.data
        response.data.forEach((item) => {
          item.create_time = item.create_time.slice(0,19)
        })
        this.tableData = response.data;
        this.pageIndex = response.pageIndex;
        this.pageSize = response.pageSize;
        this.total = data.sku.length>0?response.data.length:response.pageTotal;
      }).catch(err => {
        console.log(err);
        this.loading = false
      })
    },
    //明细弹窗
    detailDialog(rows) {
      let data = {
        procureNo: rows.procure_no,
        sku:this.SearchForm.Sku
      }
      this.$refs.dialog.openModal(data);
    },
  },
};
</script>

<style scoped lang="less">
@import url(../../../style/index.css);

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
